<template>
  <el-dialog title="" :close-on-press-escape="true" :close-on-click-modal="true"
             :visible.sync="visible" :modal="true"
             width="60%" append-to-body>
    <el-form class="main" ref="formRef" :model="dataForm" size="small" label-width="90px" label-position="left">
      <template v-if="!loading">
        <h2>Saas化服务</h2>
        <p class="user">提供方：{{dataForm.companyname}}</p>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label="产品名称：" prop="name">
                <div class="product-type">{{dataForm.name}}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="操作系统：" prop="os">
                <div class="product-type">{{dataForm.os}}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="产品类别：" prop="producttype">
                <div class="product-type">{{dataForm.producttype}}</div>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label="图片：" prop="pic">
                <img v-if="!dataForm.pic && dataForm.softtype==='大众免费使用'"  src="@/assets/images/saas1.png"/>
                <img v-if="!dataForm.pic && dataForm.softtype==='购买使用'"  src="@/assets/images/saas2.png"/>
                <!--              部署的话改成'/cloud-api'-->
                <img v-if="dataForm.pic &&  dataForm.pic.length > 0" :src="'/cloud-api' + dataForm.pic[0].url"/>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label="产品简介：" prop="description">
                <div class="product_des">{{ dataForm.description }}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="功能特点："
                                  prop="funcspec">
                <div class="product_des"  v-html="dataForm.funcspec"  disabled></div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="案例介绍："
                                  prop="caseinfo">
                <div class="product_des"  v-html="dataForm.caseinfo"  disabled></div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="联系电话：" prop="phone">
                <div class="product-type">{{dataForm.phone}}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="联系邮箱：" prop="email">
                <div class="product-type">{{dataForm.email}}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="下载方式：" prop="downloadmethod">
                <div class="product-type">{{dataForm.downloadmethod}}</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="" prop="clickNum">
                <div class="user">{{dataForm.clickNum}} 次下载</div>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24" v-if="dataForm.downloadmethod==='安装包下载'">
              <jnpf-form-tip-item label="安装包上传：" prop="package" label-width="100px">
                <JnpfUploadFile v-model="dataForm.fpackage"
                                disabled
                                detailed :fileSize="10" sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0"
                                buttonText="点击上传"  @download="handleDownload(dataForm)">
                </JnpfUploadFile>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24" v-if="dataForm.downloadmethod==='超链接'">
              <jnpf-form-tip-item label="下载地址：" prop="url">
                <a class="link" @click="downloadUrl(dataForm)">{{dataForm.url}}</a>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label-width="0">
                <JnpfText
                  :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'
                  :closable="false">
                </JnpfText>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
      </template>
    </el-form>
    <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false"/>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'

import {getConfigData} from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import {thousandsFormat} from "@/components/Generator/utils/index"
import axios from "axios";
import {mapGetters} from "vuex";

export default {
  components: {Detail},
  props: [],
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,

      dataForm: {
        id: '',
        name: '',
        softtype: "",
        producttype: [],
        os: [],
        description: '',
        pic: [],
        funcspec: '',
        caseinfo: '',
        downloadmethod: '',
        package: [],
        url: '',
        phone: '',
        email: '',
        status: "",
      },
      softtypeOptions: [{"fullName": "大众免费使用", "id": "1"}, {"fullName": "购买使用", "id": "2"}],
      softtypeProps: {"label": "fullName", "value": "id"},
      producttypeOptions: [{
        "children": [{"fullName": "CAD", "id": "1-1"}, {
          "fullName": "CAE",
          "id": "1-2"
        }, {"fullName": "CAPP", "id": "1-3"}, {"fullName": "CAM", "id": "1-4"}, {"fullName": "数字孪生", "id": "1-5"}],
        "fullName": "研发制造",
        "id": "1"
      }, {
        "children": [{"fullName": "PLM", "id": "2-1"}, {"fullName": "PDM", "id": "2-2"}, {
          "fullName": "DNC",
          "id": "2-3"
        }, {"fullName": "MDC", "id": "2-4"}, {"fullName": "QMC", "id": "2-5"}, {
          "fullName": "LIMS",
          "id": "2-6"
        }, {"fullName": "MES", "id": "2-7"}, {"fullName": "APS", "id": "2-8"}], "fullName": "生产制造", "id": "2"
      }, {
        "children": [{"fullName": "ERP", "id": "3-1"}, {"fullName": "CRM", "id": "3-2"}, {
          "fullName": "SRM",
          "id": "3-3"
        }, {"fullName": "SCM", "id": "3-4"}, {"fullName": "OA", "id": "3-5"}, {
          "fullName": "BI",
          "id": "3-6"
        }, {"fullName": "FMIS", "id": "3-7"}, {"fullName": "BOM", "id": "3-8"}, {
          "fullName": "WMS",
          "id": "3-9"
        }, {"fullName": "MRP", "id": "3-10"}], "fullName": "经营管理", "id": "3"
      }, {
        "children": [{"fullName": "监控系统", "id": "4-1"}, {"fullName": "日志管理系统", "id": "4-2"}, {
          "fullName": "故障管理系统",
          "id": "4-3"
        }, {"fullName": "安全管理系统", "id": "4-4"}], "fullName": "运维服务", "id": "4"
      }, {"fullName": "其他", "id": "5"}],
      producttypeProps: {"label": "fullName", "value": "id", "children": "children"},
      osOptions: [{"fullName": "Windows", "id": "Windows"}, {"fullName": "macOS", "id": "macOS"}, {
        "fullName": "Linux",
        "id": "Linux"
      }, {"fullName": "Android", "id": "Android"}, {"fullName": "iOS", "id": "iOS"}, {
        "fullName": "RTOS",
        "id": "RTOS"
      }, {"fullName": "其他", "id": "other"}],
      osProps: {"label": "fullName", "value": "id"},
      downloadmethodOptions: [{"fullName": "超链接", "id": "Link"}, {"fullName": "安装包下载", "id": "Installer"}],
      downloadmethodProps: {"label": "fullName", "value": "id"},
      statusOptions: [{"fullName": "草稿", "id": "0"}, {"fullName": "处理", "id": "1"}, {
        "fullName": "通过",
        "id": "2"
      }, {"fullName": "驳回", "id": "3"}, {"fullName": "撤销", "id": "4"}, {
        "fullName": "终止",
        "id": "5"
      }, {"fullName": "不通过", "id": "6"}],
      statusProps: {"label": "fullName", "value": "id"},

    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {},
  created() {

  },
  mounted() {
  },
  methods: {
    handleDownload(dataForm){
      //记录下载次数
      this.recordDownloads(dataForm);
    },
    downloadUrl(dataForm){
      window.open(dataForm.url, '_blank');
      //记录下载次数
      this.recordDownloads(dataForm);
    },
    recordDownloads(dataForm){
      const url = `/cloud-api2/portal/saasInsertrecordDownloads?saasId=${dataForm.id}&type=${dataForm.downloadmethod}&user=${this.userInfo.userId}`;
      axios.get(url).then(res => {
        this.init(dataForm.id);
        this.$emit('refresh', true)
      })
    },
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = 'general'
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(formData, modelId, defaultValue)
        })
      })
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Fz_saas_product/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
  },
}

</script>
<style lang="scss" scoped>
.product_des {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 10px 15px;
  min-height: 100px;
  margin-bottom: 25px;
}

.product-type{
  margin-bottom: 25px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 0px 15px;
  min-height: 25px;
  //line-height: 25px;
}

.el-col {
  padding: 0px 20px;
}

.el-form-item--small {
  margin-bottom: 5px;
}

.UploadFile-container {
  margin: 0 !important;
}

.file {
  margin: 15px 0;
}

::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}

::v-deep .el-dialog {
  max-height: 95%;
  margin: auto;
  overflow-y: auto;
  border-radius: 8px;
  margin-top: 20px !important;
}

::v-deep .el-dialog__body {
  width: 90%;
  margin: 0 auto;
  min-height: 700px;
}

.main {
  position: relative;

  h2 {
    border-bottom: 1px #BBBBBB solid;
    font-size: 20px;
    color: #071838;
    text-align: center;
    line-height: 40px;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

  .user{
    text-align: center;
    color: #1890FF;
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: bold;

    &:last-child{
      text-align: left;
    }
  }

  .link{
    color: #1890FF;
  }
  ::v-deep img {
    max-width: 100%;
  }
}
</style>
